<template>
  <div id="app">
    <table class="tb">
      <tr>
          <th colspan="3"> 欢迎光临</th>
      </tr>
      <!-- 循环渲染的元素tr -->
      <tr>
          <td v-for="(item) in list" :key="item.id">
            <span>{{item.name}} {{item.price}}￥/斤（{{item.discount}}折）</span>
          </td>
      </tr>
      <tr>
          <td colspan="3">请输入您需要购买的水果: <input placeholder="目前一次只能输入一种水果哦" type="text" v-model="name1"></td>
      </tr>
      <tr>
          <td colspan="3">请输入您需要购买的斤数: <input type="text" v-model.number="num"></td>
      </tr>
       <tr>
          <td colspan="3"><button @click="fn">结账买单</button></td>
      </tr>
      <tr>
          <td colspan="3">结账单：总价：{{m}}￥元 折后价：{{y}}￥元 省了：{{x}} ￥元</td>
      </tr>
  
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: "苹果", price: 10, discount: 9 },
        { id: 2, name: "香蕉",price: 8, discount: 9.5},
        { id: 3, name: "梨", price: 12, discount: 8 },
      ],
      m:0,
      y:0,
      x:0,
      name1:'',
      num: '',
    };
  },
  methods:{
    fn(){
      this.list.forEach((item)=>{
        if(item.name === this.name1){
          this.m = item.price*this.num
          this.y = this.m*item.discount/10
          this.x = this.m-this.y
        }

      })
    }
  }
};
</script>

<style>
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>
